<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rate评分</title>
	<script src="js/jquery-3.1.1.min.js"></script>
<style>
	.rateWrap{
		display: inline-block;
		margin:100px;
		font-size: 0;
	}
	.rateText{
		display:inline-block;
		height:22px;line-height:22px;
		margin-left:8px;
		font-size: 12px;
	}
	.rate{
		display:inline-block;
		--rate-size:18px;
		--rate-padding:2px;
	}
	.rate>div{
		display: inline-block;
	}
	.star{
		padding: var(--rate-padding);
		width:var(--rate-size);height:var(--rate-size);
	}
	
	/* 浮动 */
	.f-cb{
		float: left;
	}
	.f-cb:after{
		display:block;
		/* clear:both; */
		overflow:hidden;
		/* content:''; */
	}
</style>
</head>
<body>
	<div class='rateWrap' style="margin-left: 45%;">
		<div class='rate f-cb'>
			<!-- 交互2:需要注释rate内的内容 -->
			<div><img src='./img/favor.png' class='star' data-flag='0'></div>
			<div><img src='./img/favor.png' class='star' data-flag='1'></div>
			<div><img src='./img/favor.png' class='star' data-flag='2'></div>
			<div><img src='./img/favor.png' class='star' data-flag='3'></div>
			<div><img src='./img/favor.png' class='star' data-flag='4'></div>
		</div>
		<div class='rateText'></div>
	</div>
</body>
	<script src="js/rate.js"></script>
</html>